<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>walleCard</title>



    <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">

    <script src="./jquery/dist/jquery.min.js"></script>

    <script src="./bootstrap/dist/js/bootstrap.min.js"></script>


    <script src="./vue/dist/vue.min.js"></script>
    <script src="./moment/moment.js"></script>
    <script src="./moment/locale/zh-cn.js"></script>






</head>

<body>

<div class="container" id="walleCardApp">



            <div class="main" v-show="display == 'main'">

                <!-- search form  -->
                <div class="card">
                    <!-- <div class="card-header">
                                Header
                            </div> -->
                    <div class="card-body">
                        <form class="form-inline">
        
                            <div class="form-group">
                                <label for="">日期</label>
                                <input type="date" name=""  class="form-control" placeholder="" aria-describedby="helpId">
                            </div>
                            <div class="form-group">
                                <label for="">价格</label>
                                <input type="number" name=""  class="form-control" placeholder="" aria-describedby="helpId">
                            </div>
                            <button type="button" class="btn btn-primary">search</button>
                        </form>
                    </div>
                    <div class="card-footer text-muted">
                        <button type="button" class="btn btn-success" @click="fnwalleCardModal">add</button>
                    </div>
                </div>
        
        
        
                <div class="grid">
        
        
                    <template v-for="(item, index) in dataList" :key="index">
                        <div class="card" style="margin:10px auto;">
        
                            <div class="card-body">
                                <h4 class="card-title">{{item.title}} | {{item.udate}}</h4>

                                <p class="card-text"><span class="text-muted"> {{item.note}} </span></p>
                                <p>{{item.cdate}} </p>
                                <button type="button" class="btn  btn-success" @click="fnItemModal(item)">add detail</button>
                                <!--<button type="button" class="btn  btn-primary" @click="fnShowEditModal(item)">edit</button>-->
                                <!--<button type="button" class="btn  btn-danger" @click="fnShowDeleteModal(item)">del</button>-->
                                <!--<a href="#" class="card-link">Another link</a>-->
                            </div>
                        </div>
                    </template>
        
        
                </div>
        
            </div>
        
        
        
            <div class="detail" style="margin:10px auto;" v-show="display =='detail'">
        
        

        
            </div>





    <div class="modal fade" id="addCardModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">提示</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">


                    <div class="card">

                        <div class="card-body">

                            <form >
                                <div class="form-group" v-show="false">
                                    <label for="">sid</label>
                                    <input type="text" v-model="walleCardForm.sid" class="form-control" placeholder=""
                                           aria-describedby="helpId">
                                </div>
                                <!--<div class="form-group">-->
                                    <!--<label for="">tags</label>-->
                                    <!--<input type="text" v-model="walleCardForm.tags" class="form-control" placeholder="">-->

                                <!--</div>-->
                                <div class="form-group">
                                    <label for="">title</label>
                                    <input type="text" v-model="walleCardForm.title" class="form-control" placeholder="">

                                </div>
                                <div class="form-group">
                                    <label for="">内容</label>
                                    <textarea class="form-control" v-model="walleCardForm.note" rows="5"></textarea>
                                </div>

                            </form>

                        </div>

                    </div>


                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="fnSave">保存</button>
                </div>

            </div>
        </div>
    </div>





</div>


</body>

</html>


<script>


    var vm = new Vue({
        el: '#walleCardApp',
        data: {

            tip: 'ok',
            display: 'main',
            total: 0,
            page: 1,

            //search form
            walleCardSearchForm: {
                cateId: '',
                sname: '',
            },

            dataList: [

                {
                    cdate: '2019-02-12',
                    userPin: '200800',
                    note: '美容化妆品一套',
                    money: 860,
                    walleCardDate: '2019-02-10'

                },


            ],

            tagList: [],

            //data form
            walleCardForm: {

            },
            walleItemForm: {

                walleCard: {

                }
            },

            deleteId: '',



        },

        computed: {

            pages() {
                return Math.ceil(this.total / 10);
            }
        },

        filters: {

            fmtDate(date) {
                return date + moment(date).format('dddd');
            }
        },


        methods: {


            //add card detail
            fnShowDetailModal(item){

                window.open('walleItemHome.html?pid=' + item.sid);

            },

            //新增 article modal
            fnwalleCardModal() {
                $('#addCardModal').modal('show');
                // this.walleCardForm = {
                //    // walleCardDate: new Date()
                // };
                // this.display = 'detail';
            },

            //add item
            fnItemModal(item) {
                // console.log(item);
                // this.walleItemForm.walleCard = {
                //     sid: item.sid
                // }

                window.open('walleItemHome.html?card-id=' + item.sid);
                // $('#addItemModal').modal('show');
                // this.walleCardForm = {
                //    // walleCardDate: new Date()
                // };
                // this.display = 'detail';
            },

            fnBack2Main() {
                // $('#walleCardModal').modal('show');
                this.display = 'main';
            },

            //新增
            fnClear() {

            },


            // to edit modal
            fnShowEditModal(item){

                var _self = this;
                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "../walle-cards/" + item.sid,
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            console.log(response);
                            _self.walleCardForm = response.dat;
                            _self.display = 'detail';
                        }

                    }
                });
            },

            //修改 item
            fnSave() {


                var _self = this;

                var postUrl = '/walle-cards';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.walleCardForm),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {


                        console.log(response);
                         if (response.code == 0) {

                           _self.walleCardForm = response.dat;
                           _self.querywalleCardList();

                           $('#addCardModal').modal('hide');
                        //    _self.fnBack2Main();
                         }

                    }
                });
            },






            // 查询 cate
            querywalleCardList() {

                var _self = this;
                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "../walle-cards?sort=udate,desc",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            console.log(response);
                            _self.dataList = response.dat.content;
                        }

                    }
                });
            },



        },
        mounted() {


             this.querywalleCardList();
             // this.initSummernote();
        }
    })


</script>